<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible style="background: #1890ff">
      <!-- logo整体 -->
      <div class="logo" style="background: #1890ff">
        <!-- logo图片 -->
        <div style="margin-top: 5px; display: inline-block">
          <img src="http://www.byesame.com/images/index/logo.jpg" alt="#" style="height: 30px; width: 80px" />
        </div>
        <!-- logo文字 -->
        <div style="margin-top: 10px; display: inline-block">
          <span style="color: #fff;font-size: 18px;
                      margin: 0 0 0 8px;
                      font-weight: 600;
                    ">进销存</span>
        </div>
      </div>
      <a-menu :default-selected-keys="['1']" :default-open-keys="['sub1']" mode="inline" :inline-collapsed="collapsed"
        style="height: 100vh">
        <a-menu-item key="首页">
          <a-icon type="home" />
          <span>首页</span>
          <router-link to="/home/shouye">
            <span>
              首页
            </span>
          </router-link>
        </a-menu-item>
        <a-sub-menu key="库存管理">
          <span slot="title"><a-icon type="hdd" /><span>库存管理</span></span>
          <a-sub-menu key="入库管理">
            <span slot="title">
              <span>入库管理</span>
            </span>
            <a-menu-item @click="addTags">
              <router-link to="/home/caigouruku">
                <span>
                  采购入库
                </span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="采购退货出库">
              <router-link to="/home/caigoutuihuochuku">
                <span>
                  采购退货出库
                </span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="盘盈入库">
              <router-link to="/home/panyingruku">
                <span>
                  盘盈入库
                </span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="涨库入库">
              <router-link to="/home/zhangkuruku">
                <span>
                  涨库入库
                </span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="其他入库">
              <router-link to="/home/qitaruku">
                <span>
                  其他入库
                </span>
              </router-link>
            </a-menu-item>
          </a-sub-menu>
          <!-- 出库管理 -->
          <a-sub-menu key="出库管理">
            <span slot="title"><span>出库管理</span></span>
            <a-menu-item key="销售出库">

              <router-link to="/home/xiaoshouchuku">
                <span>
                  销售出库
                </span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="销售退货入库">

              <router-link to="/home/xiaoshoutuihuoruku">
                <span>
                  销售退货入库
                </span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="盘亏出库">

              <router-link to="/home/pankuichuku">
                <span>
                  盘亏出库
                </span>
              </router-link>
            </a-menu-item>
            <a-menu-item key="其他出库">
              <router-link to="/home/qitachuku">
                <span>
                  其他出库
                </span>
              </router-link>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="库存调拨"> 库存调拨 </a-menu-item>
          <a-menu-item key="成本调整"> 成本调整 </a-menu-item>
          <a-menu-item key="库存盘点"> 库存盘点 </a-menu-item>
          <a-menu-item key="实时库存"> 实时库存 </a-menu-item>
        </a-sub-menu>
        <!-- 往来管理 -->
        <a-sub-menu key="往来管理">
          <span slot="title"><a-icon type="money-collect" /><span>往来管理</span></span>
          <!-- 收款管理 -->
          <a-sub-menu key="收款管理">
            <span slot="title"><span>收款管理</span></span>
            <a-menu-item key="销售预收">
              <router-link to="/home/sqf1/one">销售预收</router-link>
            </a-menu-item>
            <a-menu-item key="销售收款"> <router-link to="/home/sqf1/two">销售收款</router-link> </a-menu-item>
            <a-menu-item key="其他收款"><router-link to="/home/sqf1/three">其他收款</router-link> </a-menu-item>
          </a-sub-menu>
          <!-- 付款管理 -->
          <a-sub-menu key="付款管理">
            <span slot="title"><span>付款管理</span></span>
            <a-menu-item key="采购预付"> <router-link to="/home/sqf1/purprepayment">采购预付</router-link> </a-menu-item>
            <a-menu-item key="采购付款"><router-link to="/home/sqf1/purpayment">采购付款</router-link></a-menu-item>
            <a-menu-item key="其他付款">  <router-link to="/home/sqf1/otherpayment">其他付款</router-link></a-menu-item>
          </a-sub-menu>
          <!-- 应收管理 -->
          <a-sub-menu key="应收管理">
            <span slot="title"><span>应收管理</span></span>
            <a-menu-item key="销售应收"> 销售应收 </a-menu-item>
            <a-menu-item key="其他应收"> 其他应收 </a-menu-item>
            <a-menu-item key="收款核应收"> 收款核应收 </a-menu-item>
          </a-sub-menu>
          <!-- 应付管理 -->
          <a-sub-menu key="应付管理">
            <span slot="title"><span>应付管理</span></span>
            <a-menu-item key="采购应付"> 采购应付 </a-menu-item>
            <a-menu-item key="其他应付"> 其他应付 </a-menu-item>
            <a-menu-item key="付款核应付"> 付款核应付 </a-menu-item>
          </a-sub-menu>
          <!-- 发票登记 -->
          <a-sub-menu key="发票登记">
            <span slot="title"><span>发票登记</span></span>
            <a-menu-item key="销售发票"> 销售发票 </a-menu-item>
            <a-menu-item key="销售发票（红字）"> 销售发票（红字） </a-menu-item>
            <a-menu-item key="采购发票"> 采购发票 </a-menu-item>
            <a-menu-item key="采购发票（红字）"> 采购发票（红字） </a-menu-item>
          </a-sub-menu>
          <!-- 月末结账 -->
          <a-menu-item key="月末结账"> 月末结账 </a-menu-item>
          <!-- 财务统计 -->
          <a-sub-menu key="财务统计">
            <span slot="title"><span>财务统计</span></span>
            <a-menu-item key="商品毛利(出库单)"><router-link to="/home/sqf1/cgreport">商品毛利(出库单)</router-link> </a-menu-item>
          </a-sub-menu>
        </a-sub-menu>
        <!-- 基础数据 -->
        <a-sub-menu key="基础数据">
          <span slot="title"><a-icon type="table" /><span>基础数据</span></span>
          <a-menu-item key="客户">
            <router-link to="/home/kehu">客户</router-link>
          </a-menu-item>
          <a-menu-item key="供应商">
            <router-link to="/home/gongying">供应商</router-link>
          </a-menu-item>

          <a-menu-item key="仓库">
            <router-link to="/home/cangku">仓库</router-link>
          </a-menu-item>

          <a-menu-item key="物料分类"> <router-link to="/home/wuliaof">物料分类</router-link> </a-menu-item>
          <a-menu-item key="物料"> <router-link to="/home/wuliao">物料</router-link> </a-menu-item>
          <a-menu-item key="计量单位"><router-link to="/home/jiangliang">计量单位</router-link> </a-menu-item>

          <a-menu-item key="币种">
            <router-link to="/home/bizhong">币种</router-link>
          </a-menu-item>

          <a-menu-item key="银行账户"><router-link to="/home/yinghang">银行账户</router-link> </a-menu-item>
        </a-sub-menu>
        <!-- 系统监控 -->
        <a-sub-menu key="系统监控">
          <span slot="title"><a-icon type="dashboard" /><span>系统监控</span></span>
          <a-menu-item key="数据日志"> 数据日志 </a-menu-item>
          <a-menu-item key="日志管理"> 日志管理 </a-menu-item>
        </a-sub-menu>
        <!-- 系统管理 -->
        <a-sub-menu key="系统管理">
          <span slot="title"><a-icon type="setting" /><span>系统管理</span></span>
          <a-menu-item key="用户管理"> <router-link to="/home/user">用户管理</router-link> </a-menu-item>
          <a-menu-item key="角色管理"><router-link to="/home/role">角色管理</router-link> </a-menu-item>
          <a-menu-item key="菜单管理"><router-link to="/home/permission"> 菜单管理 </router-link></a-menu-item>
          <a-menu-item key="部门管理(最后做)">
            部门管理(谨记最后做)
          </a-menu-item>
          <a-menu-item key="角色用户"> 角色用户 </a-menu-item>
          <a-menu-item key="数据字典"> 数据字典 </a-menu-item>
          <a-menu-item key="系统公告"><router-link to="/home/annountCement"> 系统公告 </router-link></a-menu-item>
        </a-sub-menu>
        <!-- 消息中心 -->
        <a-sub-menu key="消息中心">
          <span slot="title"><a-icon type="message" /><span>消息中心</span></span>
          <a-menu-item key="模板管理"> <router-link to="/home/sysMessageTemplateList">模板管理</router-link></a-menu-item>
          <a-menu-item key="消息管理"> <router-link to="/home/sysMessageList"> 消息管理</router-link>  </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header style="background: #1890ff; padding: 0">
        <a-icon style="color: #fff" class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)" />

        <!-- 头部右侧处理开始 -->
        <div class="box1">
          <!-- <a-slider v-model="size" />
                  <br />
                  <br /> -->
          <a-space :size="size">
            <a-button type="primary" icon="search"></a-button>
            <a-button type="primary" icon="question-circle"></a-button>
            <a-button type="primary" icon="alert"></a-button>
            <a-dropdown>
              <a-menu type="primary" slot="overlay" @click="handleMenuClick" icon="">
                <a-menu-item key="1">
                  <a-icon type="user" />个人中心
                </a-menu-item>
                <a-menu-item key="2">
                  <a-icon type="setting" /><a-icon type="tool" />账户设置
                </a-menu-item>
                <a-menu-item key="3"> 系统设置 </a-menu-item>
                <a-menu-item key="2">
                  <a-icon type="setting" />密码修改
                </a-menu-item>
                <a-menu-item key="3">
                  <a-icon type="apartment" />切换部门
                </a-menu-item>
              </a-menu>
              <a-button type="primary">欢迎您，管理员</a-button>
            </a-dropdown>
            <a-button type="primary" icon="logout" @click="back"> 退出登录 </a-button>
          </a-space>
        </div>
        <!-- 头部右侧处理结束 -->
      </a-layout-header>
      <!-- 中间内容上部标签 -->
      <div class="tab-box" style="padding: 0px">
        <a-tabs v-model="activeKey" hide-add type="editable-card" @edit="onEdit">
          <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title" :closable="pane.closable">
          </a-tab-pane>
        </a-tabs>
      </div>
      <a-layout-content :style="{
        margin: '5px',
        background: 'rgba(255, 255, 255, 0.2)',
        minHeight: '280px',
      }">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>


import shouyeView from '@/components/global/zxh/ShouYeView.vue';
import { RouterLink } from 'vue-router';
export default {
  name: "HomeView4",
  data() {
    // 添加标签用到的数据
    const panes = [
      { title: "首页", key: "1" },
      { title: "采购入库", key: "2" },
      { title: "其它入库", key: "3" },
    ];
    return {
      collapsed: false,
      // 添加标签用到的数据
      activeKey: panes[0].key,
      panes,
      newTabIndex: 0,
      size: 15,
      
    };
  },
  methods: {
    // 侧栏点击隐藏用到的方法
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    handleMenuClick(e) {
      console.log("click", e);
    },
    // 添加标签用到的方法
    callback(key) {
      console.log(key);
    },
    onEdit(targetKey, action) {
      this[action](targetKey);
    },
    // 点击菜单添加标签
    addTags() {
      const panes = this.panes;
      const activeKey = `newTab${this.newTabIndex++}`;
      panes.push({
        title: `New Tab ${activeKey}`,
        content: `Content of new Tab ${activeKey}`,
        key: activeKey,
      });
      this.panes = panes;
      this.activeKey = activeKey;
    },
    //退出登录
    back() {
      localStorage.removeItem("token");
      window.open("/login", "_self");
    },
    // 删除标签
    remove(targetKey) {
      let activeKey = this.activeKey;
      let lastIndex;
      this.panes.forEach((pane, i) => {
        if (pane.key === targetKey) {
          lastIndex = i - 1;
        }
      });
      const panes = this.panes.filter((pane) => pane.key !== targetKey);
      if (panes.length && activeKey === targetKey) {
        if (lastIndex >= 0) {
          activeKey = panes[lastIndex].key;
        }
        else {
          activeKey = panes[0].key;
        }
      }
      this.panes = panes;
      this.activeKey = activeKey;
    },
  },
  onSearch() {
    console.log(111)
  },
  conponents: {
    shouyeView
  },
  components: { RouterLink }
};
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  margin: 16px;
}

/* 头部右侧配置栏内容开始 */
.box1 {
  position: relative;
  bottom: 100%;
  left: 65%;
}

/* 头部右侧配置栏内容结束 */
.tab-box {
  background: #fff;
}
</style>

